<template>
  <div>
    <div>
      <NavBar :title="title" :route="route"></NavBar>
    </div>
    <div class="inforas">
      <div class="butse">
      <div class="Information">
        <div class="nav1">
          <van-cell is-link class="updatePwd">金榜登科第三中学</van-cell>
        </div>
        <div class="xian"></div>
        <p>考&#12288;&#12288;试&#12288;<span>2022年艺体生招生考试</span></p>
        <p>考&#12288;&#12288;点&#12288;<span>廊坊市广阳区考点</span></p>
        <p>考试专业&#12288;<span>音乐</span></p>
        <p>考试时间&#12288;<span>3月1日-3月6日</span></p>
        <p class="SignUp">报名费用：<span class="SignUp">￥200</span></p>
      </div>
      <div>
        <div class="RegistrationTime">2020-02-09<br>16:49</div>
        <div class="step">
          <van-steps direction="vertical" :active="0" active-color="rgba(42, 130, 228, 1)" inactive-icon="">
            <van-step>
              <h3>报名</h3>
              <p>须知：请认真填写个人基本信息</p>
            </van-step>
            <van-step>
              <h3>缴费</h3>
            </van-step>
            <van-step>
              <h3>在线确认</h3>
              <p class="enter">请在2022年03月01日00:00到2022<br>年03月06日23:00期间在线确认</p>
            </van-step>
          </van-steps>
        </div>
      </div>
      </div>
      <div class="EnterButton">
        <van-button type="primary" @click="GOPayment">去支付</van-button><br>
        <van-button type="primary" @click="PaymentMeney">支付</van-button>
      </div>
    </div>
  </div>

</template>

<script>
    import NavBar from '@/components/navBar.vue'

    export default {
        data() {
            return {
                // 标题  路由
                title: '我的报考详情',
                route: '/MyApplication',
            }
        },
        components: {
            NavBar,
        },
        methods: {
            GOPayment() {
                this.$router.push({path: '/CollegeMajor'})
            },
            PaymentMeney() {
                this.$router.push({path: '/PaymentMeneys'})
            }
        },

    }
</script>

<style scoped>
  .Information {
    margin-left: 15px;
    margin-right: 15px;
    background-color: #FFFFFF;
    position: relative;
    top: 0;
    left: 0;
  }

  .Information p {
    font-size: 14px;
  }

  .Information p span {

    font-size: 14px;
    line-height: 150%;
    text-align: left;
    font-weight: bold;
  }

  .xian {
    color: rgba(80, 80, 80, 1);
    background-color: rgba(229, 229, 229, 1);
  }

  .updatePwd::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: url('../../assets/logea.png');
    background-size: contain;
    margin-right: 5px;
  }

  .SignUp {
    color: rgba(255, 0, 0, 1);
  }

  .RegistrationTime {
    float: left;
    margin-left: 30px;
    font-size: 14px;
  }

  .van-button {
    background-color: rgba(39, 136, 221, 1);
    width: 345px;
    margin-top: 15px;
  }
  .EnterButton {
    text-align: center;
    margin-top: 86px;
  }
  .van-step{
    margin-left: 20px!important;
  }
  .enter{
    color: rgba(255, 87, 51, 1);
    font-size: 12px;
  }
  .van-button{
    border: none;
  }
  .xian{
    border-top: 1px solid rgba(229, 229, 229, 1);
  }
  .inforas{
    background-color: #f7f7f7;
  }
  .butse{
       background-color: #ffffff;
    margin-left: 20px;
    margin-right: 20px;
  }
  .bar{
    background-color: #f7f7f7;;
  }
  .nav1{
    margin-left: -15px;
  }van-step__circle-container
   /deep/.van-step i{
   width: 20px;
   height: 20px;
  }
</style>
